<template>
  <div class="sku-type">
    <div class="type-left">
      <p>
        <span>添加分类：</span>
        <a-input
        :maxLength="128"
          placeholder="分类名称"
          style="width: 200px; margin: 0 10px"
          v-model="oneTypeName"
        />
        <a-button type="primary" @click="addOneType"> 添加分类 </a-button>
      </p>
      <p>点击分类名称选中分类</p>
      <a-tree :treeData="oneTreeDate">
        <template slot="title" slot-scope="record">
          <p
            class="tree"
    
          >
            <span class="treeTit" @click="rowTwoType(record)">
              <span>{{ record.title }}</span>
            </span>
            <span class="treeBtn" >
              <a-popconfirm
                :title="'确认删除'+record.title+'这个分类吗?'"
                ok-text="确认"
                cancel-text="取消"
                @confirm="oneDataDelete(record)"
              >
                <a-icon type="delete" class="iconBtn" style="margin: 0 15px" />
              </a-popconfirm>
              <!-- <a-switch
                default-checked
                :disabled="true"
                v-model="record.isDisable"
                size="small"
            /> -->
            </span>
          </p>
        </template>
      </a-tree>
    </div>
    <div class="type-right">
      <h4>sku分类</h4>
      <div class="type-info">
        <div class="type-name" style="display: flex; margin-bottom: 15px">
          <span class="label">分类名称：</span>
          <a-input :maxLength="128" :disabled="chooseType" v-model="eidtData.name" />
        </div>
        <div style="margin-bottom: 15px">
          <span class="label">是否添加子分类：</span>
          <a-radio-group
            @change="addChildType"
            name="radioGroup"
            :default-value="0"
            v-model="isAddChild"
          >
            <a-radio :value="1"> 是 </a-radio>
            <a-radio :value="0"> 否 </a-radio>
          </a-radio-group>
        </div>
        <div
          class="type-name"
          v-if="isAdd"
          style="display: flex; margin-bottom: 15px"
        >
          <span class="label">子分类名称：</span>
          <a-input :maxLength="128" v-model="twoTypeName" />
        </div>
        <!-- <div style="margin-bottom: 15px">
          <span class="label">分类是否禁用：</span>
          <a-radio-group
            name="radioGroup"
            :default-value="1"
            v-model="tagDefault"
          >
            <a-radio :value="1"> 是 </a-radio>
            <a-radio :value="0"> 否 </a-radio>
          </a-radio-group>
        </div> -->
        <!-- <div style="margin-bottom:15px;">
          <span class="label">子分类是否禁用：</span>
          <a-radio-group
            name="radioGroup"
            :default-value="1"
            v-model="childTagDefault"
          >
            <a-radio :value="1"> 是 </a-radio>
            <a-radio :value="0"> 否 </a-radio>
          </a-radio-group>
        </div> -->
        <!-- <div style="display:flex;">
          <span class="label">分类备注：</span>
          <a-textarea :maxLength="256" v-model="eidtData.remark" placeholder="分类备注" />
        </div> -->
        <div>
          <a-button class="save-btn" type="primary" @click="saveType"
            >保存</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  SKU_TypeTree,
  SKU_save,
  SKU_update,
  SKU_delete,
} from "@/apis/clientSide/SKUManage/SkuType.js";
export default {
  created() {
    this.getTypeList();
  },
  data() {
    return {
      chooseType: true,
      twoFlag: false,
      isAdd: false,
      isAddChild: 0,
      eidtData: {
        name: "",
        isDisable: false,
        remark: "",
      },
      childTagDefault: 1,
      tagDefault: 0,
      //一级分类名称
      oneTypeName: "",
      twoTypeName: "",
      twoModalTypeName: "",
      threeTypeName: "",
      //一级分类
      oneTreeDate: [],
      //二级模态框添加分类
      towTreeObj: {},
      threeTreeObj: {},
      //模态框显示隐藏
      visible: false,
      //名字提示
      Textitle: "",
      //二级分类数据
      towTreeData: [],
      // 三级分类数据
      threeTreeData: [],
    };
  },
  methods: {

    addChildType(e) {
      this.isAddChild = e.target.value;
      if (this.isAddChild == 0) {
        this.isAdd = false;
      } else {
        this.isAdd = true;
      }
    },
    //递归
    // recursive(tree, data) {
    //       if (tree.title == data) {
    //         this.twoFlag = false;
    //         return false;
    //       }
    //       if (tree.children && tree.children.length > 0) {
    //         this.recursive(tree.children, data);
    //       }
    //       this.twoFlag = true;
    //     },
    recursive(tree, data) {
      if (tree.children.length > 0) {
        tree.children.forEach((item) => {
          if (item.title == data) {
            this.twoFlag = false;
          }
        });
      }
    },
    //保存修改的分类
    async saveType() {
      this.twoFlag = true;
      if (!this.eidtData || !this.eidtData.name) {
        this.$message.error("请先选择分类");
        return false;
      }
      if (this.isAdd == true) {
        if (!this.twoTypeName || this.twoTypeName == "") {
          this.$message.error("请正确添加分类名称！");
          return false;
        } else {
          this.recursive(this.eidtData, this.twoTypeName);
        }
        if (this.twoFlag) {
          let { code } = await SKU_save({
            tagDictiPid: this.eidtData.key,
            title: this.twoTypeName,
            tagType: 1,
          });
          if (code === "200") {
            this.oneDatacheck(this.eidtData);
            setTimeout(() => {
              this.$message.success("添加子分类成功");
            }, 500);
            this.chooseType = true;
            this.getTypeList();
          }
        } else {
          this.$message.error("同级目录不允许添加相同分类！");
        }
      } else {
        this.oneDatacheck(this.eidtData);
        this.chooseType = true;
      }
      this.eidtData = {};
      this.twoTypeName = "";
      this.tagDefault = 0;
      this.isAddChild = 0;
      this.isAdd = false;
    },
    //封装获取列表数据
    async getTypeList() {
      let { code, responseBody } = await SKU_TypeTree({
        tagType: 1,
        tagDictiPid: 0,
        isChild: true,
      });
      if (code === "200") {
        this.oneTreeDate = JSON.stringify(this.getSkuTypeThree(responseBody));
        this.oneTreeDate = JSON.parse(this.oneTreeDate);
        this.towTreeData = JSON.stringify(this.getSkuTypeThree(responseBody));
        this.towTreeData = JSON.parse(this.towTreeData);
      }
    },
    //添加一级分类
    async addOneType() {
      this.oneFlag = true;
      if (this.oneTypeName.length <= 0) {
        this.$message.error("请正确添加分类名称！");
        return;
      }
      this.oneTreeDate.forEach((item) => {
        if (item.name === this.oneTypeName) {
          this.oneFlag = false;
        }
      });

      if (this.oneFlag) {
        let { code } = await SKU_save({
          tagDictiPid: 0,
          title: this.oneTypeName,
          tagType: 1,
        });
        if (code === "200") {
          this.oneTypeName = "";
          this.getTypeList();
          this.$message.success("添加分类成功");
        }
      } else {
        this.$message.error("同级目录不允许添加相同分类！");
      }
    },
    //点击获取二级分类每一行信息
    async rowTwoType(data) {
      this.chooseType = false;
      this.eidtData = data.dataRef;
      if (this.eidtData.isDisable == false) {
        this.tagDefault = 0;
      } else {
        this.tagDefault = 1;
      }
    },
    //点击获取三级级分类每一行信息
    rowThreeType(data) {
      this.threeTreeObj = data.dataRef;
    },
    //修改分类
    async oneDatacheck(data) {
      let { code } = await SKU_update({
        key: data.dataRef ? data.dataRef.key : data.key,
        title: data.dataRef ? data.dataRef.title : data.name,
        isDisable: this.tagDefault,
        revision: data.revision,
        tagType: data.tagType,
        tagDictiPid: data.tagDictiPid,
        isChild: true,
      });
      if (code == "200") {
        this.$message.success("修改成功");
        this.eidtData = {};
        this.twoTypeName = "";
        this.tagDefault = 0;
        this.isAddChild = 0;
        this.isAdd = false;
        if (data.dataRef) {
          this.getTypeList();
          data.dataRef.isEdit = false;
        } else {
          data.isEdit = false;
          this.getTypeList();
        }
      } else {
        this.eidtData = {};
        this.twoTypeName = "";
        this.tagDefault = 0;
        this.isAddChild = 0;
        this.isAdd = false;
      }
    },
    //点击删除
    async oneDataDelete(data) {
      let { code } = await SKU_delete({
        key: data.key,
        tagDictiPid: data.tagDictiPid,
        revision: data.revision,
        tagType: data.tagType,
      });
      if (code === "200") {
        this.getTypeList();

        this.$message.success("删除成功");
      }
    },
    //封装组装后台数据
    getSkuTypeThree(data) {
      data.forEach((item) => {
        item.scopedSlots = { title: "title" };
        item.isEdit = false;
        item.name = item.title;
        item.isDisable == "0"
          ? (item.isDisable = false)
          : (item.isDisable = true);
  
        if (item.children && item.children.length >= 1) {
          this.getSkuTypeThree(item.children);
        }
      });
      return data;
    },

    twoDataisEdit(data) {
      data.dataRef.isEdit = true;
    },
  },
};
</script>

<style lang="less" scoped>
.sku-type {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  height: 100%;
  .type-left {
    flex: 1;
    height: 100%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
  }
  .type-right {
    flex: 1;
    h4 {
      font-size: 24px;
      text-align: center;
    }
    h5 {
      font-size: 18px;
      width: auto;
      margin: 0 auto 5px;
    }
    .type-info {
      width: 500px;
      margin: 0 auto;
      input {
        width: 70%;
      }
      textarea {
        width: 70%;
        height: 250px;
      }
      .label {
        width: 120px;
        display: inline-block;
        text-align: right;
      }
      .save-btn {
        width: 100px;
        margin: 15px 0 0 70%;
      }
    }
  }
}
.tree {
  font-size: 18px;
  width: auto;
  display: flex;
  justify-content: space-between;
  .treeTit {
    display: inline-block;
    width: 100%;
    span {
      width: 100%;
      display: inline-block;
    }
  }
}
.menu-data {
  width: 55%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #eee;
}
.menu-config {
  width: 45%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #eee;
}
.header .name {
  font-weight: bold;
  color: #888;
}
</style>
